<template>
  <div>
    <div class="container">
      <div>圆型</div>
        <canvas id="canvas" width="545" height="545"></canvas>
    </div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>时间段报表</span>
        </div>
        <div style="height:337px;">
          <e-charts ref="chart1" :chart-option="data1" />
        </div>
      </el-card>
      <!-- {{ name }} -->
  </div>
</template>

<script>
import ECharts from '@/views/components/ECharts'
import { mapGetters } from 'vuex'
export default {
  name: 'Dashboard',
  components: {
    ECharts
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'name'
    ])
  },
  data () {
    return {
      data1: {}
    }
  },
  created () {
    this.init()
  },
  mounted () {
    // cnavas画块
    const oCanvas = document.querySelector('canvas')
    // 2.从canvas中拿到绘图工具
    const ctx = oCanvas.getContext('2d')
    ctx.beginPath() // 开启新路径
    ctx.arc(395, 150, 80, 0, 2 * Math.PI)// x:395 y:150 大小：80 闭合：0  Math.PI圆周率π = 3.14 = 180°
    ctx.fillStyle = '#f2f2f2'// 填充颜色
    ctx.fill()
    ctx.closePath() // 关闭路径

    ctx.beginPath() // 开启新路径
    ctx.arc(395.1, 150, 80, -3.63, -5.8, 3, 0, true) // 起点x.起点y,半径x,半径y,旋转的角度，起始角，结果角，顺时针还是逆时针
    ctx.fillStyle = '#c7c8cc'// 填充颜色
    ctx.fill()
    ctx.closePath() // 关闭路径

    ctx.beginPath() // 开启新路径
    ctx.fillStyle = '#fff'
    ctx.font = '14px 微软雅黑'
    ctx.textAlign = 'center'
    this.drawtext(ctx, '项目名称项目名称项目', 400, 190, 80)
    ctx.closePath() // 关闭路径

    ctx.beginPath() // 开启新路径
    ctx.arc(395, 165, 95, 0, Math.PI, false)
    ctx.lineWidth = 3
    // ctx.closePath() // 关闭路径

    // ctx.beginPath() // 开启新路径
    ctx.moveTo(299, 160)
    ctx.arc(299, 160, 5, 0, 2 * Math.PI)

    // ctx.closePath() // 关闭路径

    ctx.strokeStyle = '#f2f2f2'// 笔触颜色
    // ctx.strokeStyle = '#000'// 笔触颜色
    ctx.stroke()
  },
  methods: {
    // 文字换行
    drawtext (ctx, t, x, y, w) {
    // 参数说明
    // ctx：canvas的 2d 对象，t：绘制的文字，x,y:文字坐标，w：文字最大宽度
      const chr = t.split('')
      let temp = ''
      const row = []

      for (let a = 0; a < chr.length; a++) {
        if (ctx.measureText(temp).width < w && ctx.measureText(temp + (chr[a])).width <= w) {
          temp += chr[a]
        } else {
          row.push(temp)
          temp = chr[a]
        }
      }
      row.push(temp)
      for (let b = 0; b < row.length; b++) {
        if (row.length > 1) { // 超出一行显示...
          ctx.fillText(row[b] + '...', x, y + (b + 1) * 20)// 每行字体y坐标间隔20
          return
        } else {
          ctx.fillText(row[b], x, y + (b + 1) * 20)// 每行字体y坐标间隔20
        }
      }
    },
    init () {
      this.$nextTick(() => {
        this.data1 = {
          grid: {
            left: '3%',
            right: '3%'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          toolbox: {
            feature: {
              saveAsImage: { show: true },
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true }
            }
          },
          legend: {
            data: ['访问次数', '使用数据库', '读者人数', '数据流量', '文献摘要浏览(篇)',
              '文献下载(篇)', '文献在线阅读(篇)', '检索次数', '浏览页面数']
          },
          xAxis: [
            {
              type: 'category',
              data: ['2019/08', '2019/09', '2010/10', '2019/11', '2019/12',
                '2020/01', '2020/02', '2020/03', '2020/04', '2020/05', '2020/06',
                '2020/07', '2020/08', '2020/09', '2020/10', '2020/11', '2020/12',
                '2021/01', '2021/02', '2021/03', '2021/04', '2021/05', '2021/06',
                '2021/07', '2021/08', '2021/09', '2021/10', '2021/11', '2021/12',
                '2022/01'],
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          dataZoom: [
            {
              type: 'inside',
              start: 0,
              end: 100
            },
            {
              start: 0,
              end: 100
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '篇数',
              axisLabel: {
                formatter: '{value}'
              }
            },
            {
              type: 'value',
              name: '流量',
              axisLabel: {
                formatter: '{value} gb'
              }
            }
          ],
          series: [
            {
              name: '数据流量',
              type: 'bar',
              data: [
                5000, 5100, 85000, 18000, 8000,
                6000, 21500, 40500, 20300, 28000, 20000,
                7000, 1000, 42000, 82000, 15000, 16000,
                19000, 18000, 22000, 23000, 40000, 17800,
                2000, 500, 18000, 80400, 40300, 18000,
                30000
              ]
            },
            {
              name: '访问次数',
              type: 'line',
              yAxisIndex: 1,
              data: [
                2.6, 5.9, 9.0, 26.4, 28.7,
                70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
                2.3, 4.5, 6.5, 1.9, 8.8, 6.5,
                30.7, 55.6, 82.2, 48.7, 18.8, 6.0,
                1.9, 8.8, 6.5, 5.9, 9.0, 26.4,
                33
              ]
            },
            {
              name: '使用数据库',
              type: 'line',
              yAxisIndex: 1,
              data: [
                2.3, 4.5, 6.5, 1.9, 8.8,
                48.7, 18.8, 6.0, 2.6, 5.9, 9.0,
                30.7, 55.6, 82.2, 9.0, 26.4, 5.9,
                35.6, 12.2, 48.7, 18.8, 6.5, 5.9,
                2.6, 5.9, 9.0, 1.9, 8.8, 6.5,
                14
              ]
            },
            {
              name: '读者人数',
              type: 'line',
              yAxisIndex: 1,
              data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
            },
            {
              name: '文献摘要浏览(篇)',
              type: 'line',
              yAxisIndex: 1,
              data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
            },
            {
              name: '文献下载(篇)',
              type: 'line',
              yAxisIndex: 1,
              data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
            },
            {
              name: '文献在线阅读(篇)',
              type: 'line',
              yAxisIndex: 1,
              data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
            },
            {
              name: '检索次数',
              type: 'line',
              yAxisIndex: 1,
              data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
            },
            {
              name: '浏览页面数',
              type: 'line',
              yAxisIndex: 1,
              data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
            }
          ]
        }
      })
    }

  }
}
</script>

<style lang="scss" scoped>
.container{
  background: #fff;
  padding: 20px;
}
.box-card{
  margin: 20px 0;
}
</style>
